<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hash 模式</title>
  </head>
  <body>
    <div>
    	<ul>
            <li><a href="#/page1">page1</a></li>
            <li><a href="#/page2">page2</a></li>
        </ul>
        <div id="route-view"></div>
    </div>
    <script type="text/javascript">
    	  //下面为Hash的路由实现方式
        //第一次加载的时候，不会执行hashchange监听事件，默认只执行一次
        window.addEventListener('DOMContentLoaded', Load)
        window.addEventListener('hashchange', HashChange)
        var routeView = null
        function Load() {
            routeView = document.getElementById('route-view')
            //默认执行一次
            HashChange()
        }
        function HashChange() {
            console.log('location.hash', location.hash)
            //得到location.hash 的值，给route-view赋值
            switch(location.hash){
                case '#/page1':
                    routeView.innerHTML = 'page1'
                    return
                case '#/page2':
                    routeView.innerHTML = 'page2'
                    return 
                default:
                    routeView.innerHTML = 'page1'
                    return
            }
        }
    </script>
  </body>
</html>
